<template>
	<view  style="background: #fff;min-height: 100vh;">
		<u-navbar :background="background" back-icon-color="#FFFFFF">
			<view class="slot-wrap" style="width: 460upx;">
				<view class="search-wrap">
					<u-search bg-color="#fff" v-model="searchValue" @change="change" @custom="custom" @search="search"
						shape="round" placeholder="请输入您要搜索的内容" :clearabled="true" :show-action="false" input-align="left"
						@clear="clear">
					</u-search>
				</view>
			</view>
		</u-navbar>
		<view>
			<block v-for="(item,idx) in records" :key="idx">
				<navigator target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e"
					:path="item.detailUrl" extra-data="" version="release">
					<view class="commodity-body">
						<view class="commodity-image">
							<u-lazy-load border-radius="8" height="185" img-mode="aspectFill"
								:image="item.goodsImageUrl">
							</u-lazy-load>
						</view>
						<view class="commodity-con">
							{{item.title}}
							<view class="commodity-price">
								￥{{item.salePrice}}
							</view>
						</view>
					</view>
					<u-line />
				</navigator>
			</block>
			<view class="noData" v-if="records.length ==0">
				<view class="noDataicon">
				</view>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"
import uSearch from "@/uview-ui/components/u-search/u-search.vue"
import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"
import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"
import uLineProgress from "@/uview-ui/components/u-line-progress/u-line-progress.vue"
	export default {
		components: {
			uNavbar,
			uSearch,
			uLazyLoad,
			uLine
		},
		data() {
			return {
				records: [],
				pageCurrent: 1,
				pageSize: 10,
				searchValue: '',
				background: {
					background: 'url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png) no-repeat',
					backgroundSize: 'cover',
				}
			}
		},
		methods: {
			goodsSc(keyword, pageCurrent, pageSize,onReach) {
				let _this = this;
				this.$shopnew.get(global.apiUrls.goodsSc + '?keyword=' + keyword + '&pageCurrent=' + pageCurrent +
						'&pageSize=' + pageSize, {})
					.then(res => {
						console.log(res, 54)
						if (res.data.code == 1000) {
							if(onReach){//懒加载
								let records = res.data.result.records;
								_this.records = _this.records.concat(records); //搜索商品结果
							}else{
								let records = res.data.result.records;
								_this.records = records; //搜索商品结果
							}
						}
					}).catch(err => {})
			},
			change(e) { //改变
				this.searchValue = e;
			},
			search(e) {
				this.goodsSc(e, this.pageCurrent, this.pageSize,true) //
			},
			custom(e) {
				console.log(e)
				this.goodsSc(e, this.pageCurrent, this.pageSize,true) //
			},
			onReachBottom: function() { //分页加载
			this.goodsSc(this.searchValue, this.pageCurrent+=1, this.pageSize,true) //
			}
		}
	}
</script>

<style lang="scss">
	@import "../../find/basescss/basescss.scss";

	.viewBody {
		width: 750upx;
		margin: 0 auto;
	}

	.keView {
		display: inline-block;
		width: 155upx;
		height: 162upx;
		background: #FFF5F5;
		border-radius: 20upx;
		margin: 0 0 30upx 28upx;
		text-align: center;
	}

	.loadImage {
		width: 40upx;
		height: 40upx;
		margin: 40upx auto 10upx;
	}

	.SearchTitle {
		width: 710upx;
		margin: 0 auto;
		height: 105upx;
		line-height: 105upx;
		font-size: 28upx;
		font-weight: 400;
		color: #000000;
	}

	.titlel {
		width: 660upx;
	}

	.historyView {
		display: inline-block;
		padding: 14upx 44upx;
		background: #F9F9F9;
		margin: 0 0 20upx 20upx;
		border-radius: 35upx;
		color: #6E6E6E;
	}

	.searchtoView {
		width: 750upx;
		height: 102upx;
		font-size: 28upx;
		font-weight: 500;
		color: #333333;
		line-height: 102upx;
		padding: 0 24upx;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

	.searchtoView::before {
		content: '';
		width: 30upx;
		height: 36upx;
		position: absolute;
		top: 30upx;
		right: 30upx;
		background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 30upx 36upx;
	}

	.noData {
		font-size: 30upx;
		font-weight: 500;
		color: #9B9B9B;
		line-height: 42upx;
		text-align: center;

		.noDataicon {
			width: 213upx;
			height: 209upx;
			background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
			background-size: 213upx 209upx;
			margin: 400upx auto 30upx;
		}
	}

	.commodity-body {
		width: 720upx;
		height: 248upx;
		margin: 0 auto;
		display: flex;
		padding: 30upx 0 32upx;

		.commodity-image {
			width: 185upx;
			height: 185upx;
			margin-right: 20upx;
		}

		.commodity-con {
			width: 500upx;
			height: 100%;
			font-size: 26upx;
			font-weight: 500;
			color: #333333;
			line-height: 37upx;
			position: relative;

			.commodity-price {
				position: absolute;
				bottom: 4upx;
			}
		}
	}
</style>
